<template>
  <el-table
    :data="data"
    style="width: 100%"
  >
    <el-table-column
      prop="id"
      label="id"
      width="80"
    >
    </el-table-column>
    <el-table-column
      prop="productClassName"
      label="分类名称"
      width="180"
    />
    <el-table-column
      prop="productName"
      label="产品名称"
      width="180"
    />
    <el-table-column
      prop="date"
      label="产品封面"
      width="180"
    >
      <template slot-scope="data">
            <el-image
              style="width: 100px; height: 100px"
              :src="data.row.productImg"
              :fit="fit"></el-image>

      </template>
    </el-table-column>

    <el-table-column
      prop="date"
      label="是否展示"
      width="180"
    >
    <template slot-scope="data">
      <div>{{ data.row.isShow == 1?'是':'否' }}</div>
    </template>
  </el-table-column>

    <!-- <el-table-column
      prop="date"
      label="类别介绍"
      width="180"
    >
    </el-table-column> -->

    <el-table-column
      prop="date"
      label="操作"
      fixed="right"
      width="180"
    >
      <template slot-scope="scope">
        <el-button type="primary" size="small" @click.native="editItem(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click.native="delItem(scope.row)">删除</el-button>
      </template>
    </el-table-column>>
  </el-table>
</template>

<script>
import ServiceApi from './api'
export default ({
  name: 'ServiceTable',
  props:['data'],
  data() {
    return {
      
    }
  },
  methods:{
    editItem(row) {
      this.$emit("editHandle",{data:row});
    },
    delItem(row) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).then(action => {
        this.deleteItem(row);
      })
    },
    async deleteItem(rowData) {
      const { data } = await ServiceApi.netYzProductDel(rowData);
      if (data.code === 200) {
        this.$message({
          message: data.msg || '删除成功',
          type: 'success',
        });
        this.$emit('refreshList')
      } else {
        this.$message({
          message: data.msg || '删除失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    }
  }
})

</script>
